{% extends "profile.html" %}
{% block extrahead %}
    {{ block.super }}
    <script type="text/javascript">
        var profile_page = true;
    </script>
{% endblock  %}
{% block profile_content %}
    <div id=leftcolumn>
        {% include "profile_navigate.html" %}
        {% include "messages.html" %}
    </div>
    <div id="profile_container">
        <form enctype="multipart/form-data" action="/profile/" method="post">
        {% csrf_token %}
        <div id="profile">
            <div id="profile_title">
                <div>
                    <span>Profile</span>
                </div>
                <div>
                    <label for="id_avatar">{{ form.avatar.label }}</label>
                </div>
            </div>
            <div>
                <div id="profile_avatar">
                    {% if user.avatar %}
                        <img src="{{ user.avatar.url }}">
                    {% else %}
                        <img src="{{ STATIC_URL }}/images/default.jpg">
                    {% endif %}
                </div>
                <div id="profile_upload">
                    <div>
                        <span>Upload your photo</span>
                    </div>
                    <div>
                        {{ form.avatar.errors }}
                        {{ form.avatar }}
                    </div>
                    <div>
                        (Max 5 MB. JPEG, JPG or PNG)
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            {{ form.first_name.errors }}
            <p><label for="id_first_name">{{ form.first_name.label }}</label>{{ form.first_name }}</p>
            {{ form.last_name.errors }}
            <p><label for="id_last_name">{{ form.last_name.label }}</label>{{ form.last_name }}</p>
            {{ form.location.errors }}
            <p><label for="id_location">{{ form.location.label }}</label>
                {{ form.location }}
                {% if user.location %}
                    <img src="{{ user.location.flag }}">
                {% endif %}
            </p>
            {{ form.birthday.errors }}
            <p><label for="id_birthday">{{ form.birthday.label }}</label>{{ form.birthday }}</p>
            {{ form.interest.errors }}
            <p><label for="id_interest">{{ form.interest.label }}</label>{{ form.interest }}<br>
            separate interests by comma
            </p>
            {% comment %}
            {{ form.locale.errors }}
            <p><label for="id_locale">{{ form.locale.label }}</label>{{ form.locale }}</p>
            {% endcomment %}
        </div>
        <div id="account">
            <div id="account_title"><span>Account</span></div>
            {{ form.username.errors }}
            <p><label for="id_username">{{ form.username.label }}</label>{{ form.username }}</p>
            {{ form.mobile_email.errors }}
            <p><label for="id_mobile_email">{{ form.mobile_email.label }}</label>{{ form.mobile_email }}</p>
            {{ form.email.errors }}
            <p><label for="id_email">{{ form.email.label }}</label>{{ form.email }}</p>

            <div id="delete_profile">
                <div>We'd hate to see you go, but you can cancel your</div>
                <div>8minut.es account any time. We'd appreciate it if</div>
                <div>
                    <a href="/feedback">you told us what went wrong</a>
                    <a href="/profile/delete">Delete account</a>
                </div>
            </div>
        </div>

        <div id="Connect">
            <div id="Connect_title">
                <span>Connect</span>
            </div>
            <div id="Connect_box">
                <div class="icon_facebook_big"></div>
                <div class="connect_label">
                    <span>{{ form.fb_auto_post }}</span>
                    Auto-post my items on my facebook page
                </div>
            </div>
        </div>

        <div class="clearfix"></div>
        <div id="profile_submit">
            <input type="submit" id="profile_button" class="submit_button" value="&nbsp;&nbsp;Update Profile&nbsp;&nbsp;"/>
        </div>
        </form>
    </div>
{% endblock %}
